這系列無障礙的鐵人賽文章,實踐的內容主要是根據 W3C:WAI-ARIA 的實踐,從設計模式及組件(Design Patterns and Widgets)裡面挑選最想嘗試的,如果有朋友想瞭解全部 Widget 該怎麼實作及其規範,歡迎自行爬規範內容,也許我們可以討論一下;若以下文章內容理解有任何錯誤,請多指教~
(圖片來源:Element UI)
3.22 Tabs
Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time. Each tab panel has an associated tab element, that when activated, displays the panel. The list of tab elements is arranged along one edge of the currently displayed panel, most commonly the top edge.
Tabs
是由一系列層疊的內容區域(tab panels)組成的,一次只展示一個 tabpanel
。每個 tabpanel
有一個與之關聯的 tab
元素,寫完發現唸起來好繞口,乾脆引用上面的 Element UI 頁籤圖片,將接下來會提及的專有名詞做成示意圖來表示,大家會更一目瞭然。
Tabs
或 Tabbed Interface
。
Tab List
:含有「一系列」頁籤標題的區塊。
tab
:讓使用者可以點擊切換顯示內容的元素。tabpanel
:當關聯的 tab
被觸發,顯示 tabpanel
的內容。了解這幾個名詞的意義及他們之間的關係,可以幫助理解後面無障礙的說明。